<template>
  <div class="app-container">
    <el-card>
      <TitleLine title="基本信息" />
      <el-row class="hd" type="flex">
        <!-- 企业主信息 start -->
        <el-col class="left flex">
          <div class="pic">
            <img class="mr-10" :src="informatation.logo" alt="" />
            <p class="status">{{ informatation.status == 1 ? '正常' : '冻结' }}</p>
          </div>
          <div class="text">
            <div class="text-item mb-15 flex align-center">
              <div class="lable">{{ handlePlatFrom(informatation.platform) }}平台</div>
            </div>
            <div class="text-item mb-15 flex align-center">
              <div class="lable">联系人：</div>
              <div class="item">{{ informatation.touchName }}</div>
            </div>
            <div class="text-item mb-15 flex align-center">
              <div class="lable">联系电话：</div>
              <div class="item">{{ informatation.touchMobile }}</div>
            </div>
            <div class="text-item mb-15 flex align-center">
              <div class="lable">联系地址：</div>
              <div class="item">
                {{ informatation.provinceName }}{{ informatation.cityName
                }}{{ informatation.districtName }}
              </div>
            </div>
          </div>
        </el-col>
        <!-- 企业主信息 end -->

        <!-- 企业介绍 start -->
        <el-col class="center">
          <div class="lable-item mb-15 flex align-center">
            <div class="lable">主营业务：</div>
            <div class="item">{{ informatation.mainBusiness }}</div>
          </div>
          <div class="lable-item mb-15 flex align-center">
            <div class="lable">兑换汇率：</div>
            <div class="item">1:{{ informatation.exchangeRate }}</div>
          </div>
          <div class="lable-item mb-15 flex align-center">
            <div class="lable">入驻方式：</div>
            <div class="item">第三方平台</div>
          </div>
          <div class="lable-item mb-15 flex align-center">
            <div class="lable">入驻时间：</div>
            <div class="item">{{ informatation.createdTime }}</div>
          </div>
        </el-col>
        <!-- 企业介绍 end -->

        <!-- 企业主统计概况 start -->
        <el-col class="right">
          <LiveOverview :tabs="overviewData" @refresh="handleRefresh" />
        </el-col>
        <!-- 企业主统计概况 end -->
      </el-row>

      <!-- 列表 start -->
      <div class="tab mb-20">
        <div
          class="tabl-item"
          :class="currentIndex == index ? 'on' : ''"
          @click="handleTab(item, index)"
          v-for="(item, index) in tabList"
          :key="item.title"
        >
          <p>{{ item.title }}</p>
          <p class="mt-10">({{ item.num }})</p>
        </div>
        <el-button class="btn" @click="handleExport">导出</el-button>
      </div>

      <PageTable
        :data="dataSource"
        :columns="columns"
        :options="options"
        @selectChange="selectChange"
        v-if="currentIndex != 2"
      />

      <div v-else>
        <div v-if="dataSource && dataSource.length">
          <OrderItem v-for="item in dataSource" :key="item.id" :orderItem="item" />
        </div>
        <el-empty v-else description="暂无数据" />
      </div>

      <Pagination
        v-show="total > 0"
        :total="total"
        :pageNo.sync="formData.pageNo"
        :pageSize.sync="formData.pageSize"
        @pagination="handleLoad"
      />
      <!-- 列表 end -->
    </el-card>
  </div>
</template>

<script>
import { export2Excel } from '@/utils/export'
import { useFilterStatistics } from '@/hooks'
import { firstColumns, secondColumns } from './detail'
import OrderItem from '../components/orderItem/orderItem.vue'
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  components: {
    OrderItem
  },
  data() {
    return {
      // 统计概况数据
      overviewData: [
        {
          isShow: true,
          baseData: {
            key: 'supportIntegralCount',
            label: '支入积分',
            value: 4500
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'transitionMemberCount',
            label: '转换会员数',
            value: 4500
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'exchangeOrderCount',
            label: '兑换订单数',
            value: 4500
          }
        }
      ],

      // tab栏
      tabList: [
        { title: '支入积分明细', key: 'supportIntegralCount', num: 12 },
        { title: ' 转换会员列表', key: 'transitionMemberCount', num: 12 }
        // { title: '兑换订单列表', key: '', num: 12 }
      ],

      // 选中tablan索引
      currentIndex: 0,

      // 表格配置
      options: {
        border: false,
        select: true
      },

      // 选中行
      selectList: [],

      // 列表数据
      dataSource: [],

      // 总条数
      total: 10,

      // 列表请求参数
      formData: {
        pageNo: 1,
        pageSize: 10
      },

      // 资料
      informatation: {}
    }
  },
  computed: {
    ...mapState('order', ['orderList']),
    ...mapGetters(['selectOrderList']),
    // 表头
    columns() {
      const obj = {
        0: firstColumns,
        1: secondColumns
      }
      return obj[this.currentIndex]
    }
  },
  created() {
    this.handleLoad()
  },
  methods: {
    ...mapMutations('order', ['SET_ORDER_LIST']),

    // 初始化数据
    async handleLoad() {
      // 1.资料
      const { data } = await this.$http.user.platformFirm.detail({ id: this.$route.query.id })
      this.informatation = data

      const params = {
        id: this.$route.query.id,
        pageNo: 1,
        pageSize: 10
      }

      // 2.统计
      const res = await this.$http.user.platformFirm.table(params)
      const integralData = {
        baseData: {
          supportIntegralCount: res.data.supportIntegralCount,
          transitionMemberCount: res.data.transitionMemberCount,
          exchangeOrderCount: res.data.exchangeOrderCount
        }
      }
      this.overviewData = useFilterStatistics(this.overviewData, integralData)
      this.tabList = this.tabList.map(el => ({
        ...el,
        num: res.data[el.key] || 0
      }))

      // 3.支入积分明细
      const result = await this.$http.user.platformFirm.getDetailList({
        ...params,
        platform: this.informatation.platform,
        transactionType: 0
      })
      this.dataSource = result.data.records
      this.total = result.data.total

      this.SET_ORDER_LIST({ key: 'orderList', data: this.dataSource || [] })
    },
    // 数据刷新
    handleRefresh() {
      this.handleLoad()
    },

    // 切换tab
    async handleTab(item, index) {
      const params = {
        id: this.$route.query.id,
        pageNo: 1,
        pageSize: 10
      }

      // 1.支入积分明细
      if (index == 0) {
        const result = await this.$http.user.platformFirm.getDetailList({
          ...params,
          platform: this.informatation.platform,
          transactionType: 0
        })
        this.dataSource = result.data.records
        this.total = result.data.total
      }

      // 2.转换会员列表
      else if (index == 1) {
        const result = await this.$http.user.platformFirm.transitionMemberList(params)
        console.log(result, '转换会员列表')
        this.dataSource = result.data.records
        this.total = result.data.total
      }

      // 3.兑换订单列表
      else {
        console.log('兑换订单列表')
      }

      this.currentIndex = index
      this.SET_ORDER_LIST({ key: 'orderList', data: this.dataSource || [] })
    },

    // 获取选中行
    selectChange(rows) {
      console.log(rows, 'selectChange')
      this.selectList = rows
    },

    // 平台展示
    handlePlatFrom(value) {
      // 2: 好物特工, 4: 酒馆长, 8: 挖咖, 16: 机咖, 32: 秦宗, 64: 机甲通
      const obj = {
        2: '好物特工',
        4: '酒馆长',
        8: '挖咖',
        16: '机咖',
        32: '秦宗',
        64: '机甲通'
      }
      return obj[value]
    },

    // 导出
    handleExport() {
      if (!this.selectList.length) {
        return this.$message.error('请选择要导出的数据')
      }
      const list = this.$lodash.cloneDeep(this.selectList)

      const headerData = this.columns.filter(item => item.prop).map(item => item.label)
      const filterData = this.columns.filter(item => item.prop).map(item => item.prop)
      let tableData = []
      if (this.currentIndex == 0) {
        headerData.splice(1, 0, '用户名')
        headerData.splice(2, 0, '电话')
        headerData.splice(5, 0, '积分类型')
        filterData.splice(1, 0, 'userName')
        filterData.splice(2, 0, 'userMobile')
        filterData.splice(5, 0, 'transactionType')

        tableData = list.map(item => {
          item.transactionType = item.transactionType == 0 ? '收入' : '支出'
          item.recordStatus = item.recordStatus ? '成功' : '失败'
          return item
        })
      } else {
        const obj = {
          1: '微信扫码',
          2: '小程序注册',
          3: '门店推荐',
          4: 'AI名片',
          5: '用户推荐',
          6: '企业主导入',
          7: '平台导入'
        }
        headerData.splice(0, 0, '用户名')
        headerData.splice(1, 0, '电话')
        headerData.splice(2, 0, '注册方式')
        filterData.splice(0, 0, 'nickName')
        filterData.splice(1, 0, 'mobile')
        filterData.splice(2, 0, 'registerWay')

        // 1: 微信扫码, 2: 小程序注册, 3: 门店推荐, 4: AI名片, 5: 用户推荐, 6: 企业主导入, 7: 平台导入
        tableData = list.map(item => {
          item.registerWay = obj[item.registerWay]
          return item
        })
      }

      console.log(headerData, filterData)

      export2Excel(
        headerData,
        tableData,
        filterData,
        this.currentIndex == 0 ? '支入积分明细' : '转换会员列表',
        () => {
          this.$message.success('导出成功！')
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.hd {
  display: flex;
  justify-content: space-between;
  .pic {
    width: 100px;
    height: 85px;
    margin-right: 10px;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
    .status {
      text-align: center;
      padding: 5px 0;
      background-color: #0a82f3;
      color: #fff;
      width: 100px;
    }
  }
}
.tab {
  display: flex;
  align-items: center;
  position: relative;
  .btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
  }
}
.tabl-item {
  border: 1px solid #e6e3e3;
  background-color: #fff;
  width: 140px;
  height: 65px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  margin-right: 10px;
  cursor: pointer;
}
.tabl-item.on {
  background-color: #f7f8fa;
  color: #399afb;
  border: none;
  font-weight: 600;
}
/deep/ .el-table th.el-table__cell {
  background-color: #f7f8fa;
}
</style>
